<template>
	<view class="logistics" v-if="orderDetailData!=null">
		<uninavbar title="订单详情" leftIcon='leftIcon' rightIcon='' rightText="" />
		<!-- <view class="map"></view> -->
		<view class="countdown" v-if="orderDetailData.status==0&&countdownShow">
			<!-- 剩 <text> 29</text> 分 <text>31</text> 秒自动关闭 -->
			<text>交易剩于时间</text>
			<uni-countdown class="uni-countdown" v-if="countdownShow" :show-day="false" :day="0" :hour="0" :minute="0"
				:second="second" :show-colon="false" color="#FFFFFF" @timeup="timeup" background-color="#6954D5">
			</uni-countdown>
		</view>

		<view class="logisticsview">

			<view class="logisticsInfo">
				<view class="logisticsTitle fastMail">
					<view class="" v-if="expressData!=null">
						<view class="">
							{{expressData.logisticsStatusDesc}}
						</view>
						<view class="">
							<text> {{expressData.logisticsCompanyName}}</text> <text
								v-if="expressData.mailNo!='null'">快递号:{{expressData.mailNo}}</text>
						</view>

						<image class="copy" src="/static/images/user/copy.png" v-if="orderDetailData.status==2" mode=""
							@tap="goResult(expressData.mailNo)">
						</image>
					</view>
					<view class="" v-else>暂无物流信息</view>
					<!-- //订单状态:0->待付款;1->待发货;2->已发货;3->已完成;4->已关闭;5->无效订单" -->
					<view class="orderStatus" v-if="orderDetailData.status==0">
						待付款
					</view>
					<view class="orderStatus" v-if="orderDetailData.status==1">
						待发货
					</view>
					<view class="orderStatus" v-if="orderDetailData.status==2">
						已发货
					</view>
					<view class="orderStatus" v-if="orderDetailData.status==3">
						已完成
					</view>
					<view class="orderStatus" v-if="orderDetailData.status==4">
						已取消
					</view>
				</view>
				<view class="orderInfo">

					<image class="orderAddressImg" src="/static/images/productDetails/od.png" mode=""></image>
					<view class="orderInfoText">
						<view class="">
							{{orderDetailData.receiverName}}
							<text class="orderPhone">{{orderDetailData.receiverPhone}}</text>
						</view>
						<text>
							{{orderDetailData.receiverProvince}}{{orderDetailData.receiverCity}}{{orderDetailData.receiverRegion}}
						</text>
					</view>
					<!-- <image v-if="orderDetailData.status==1||orderDetailData.status==0" class="address"
						src="/static/images/productDetails/zk.png" mode=""></image> -->

				</view>
				<view class="logisticsList" v-for="(item,index) in logisticsTraceDetailList" :key='index'
					v-if="index<2&&orderDetailData.status==2">
					<view :class="index==0?'tip tipShow':'tip'"></view>

					<!-- <view class="tipText" v-if="index==0">
						<view>
							已下单
						</view>
						<text>
							{{dayjs(item.time).format('MM-DD hh:mm:ss')}}</text>
					</view> -->
					<view class="tipText">
						<view>
							<view class="" v-if="item.logisticsStatus=='WAIT_ACCEPT'">已发货</view>
							<view class="" v-if="item.logisticsStatus=='ACCEPT'">已揽收</view>
							<view class="" v-if="item.logisticsStatus=='TRANSPORT'">运输中</view>
							<view class="" v-if="item.logisticsStatus=='DELIVERING'">派件中</view>
							<view class="" v-if="item.logisticsStatus=='FAILED'">
								包裹异常
								<text class="" v-if="item.subLogisticsStatus=='REFUSE SIGN'">
									（拒收）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='DELVER ABNORMAL'">
									（派件异常）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='RETENTION'">
									（滞留件）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='ISSUE'">
									（问题件）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='RETURN'">
									（退回件）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='DAMAGE'">
									（破损）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='CANCEL ORDER'">
									（揽件取消）
								</text>
							</view>
							<view class="" v-if="item.logisticsStatus=='SIGN'">已签收</view>
							<view class="" v-if="item.logisticsStatus=='RECEIVE'">已下单</view>
						</view>

						<text>{{dayjs(item.time).format('MM-DD hh:mm:ss')}}</text>
					</view>
					<text class="">
						{{item.desc}}
					</text>
					<view class="inDetail" @tap="popup()" v-if="index==0">详细信息></view>
				</view>

			</view>
			<view class="logisticsGoods">
				<!-- 	<view class="">
					芯娇晴旗舰店芯娇芯娇芯娇芯芯娇…备份
				</view> -->
				<view class="goodsInfo" v-for="(item,index) in orderItemList">
					<view class="goodsImg">
						<image :src="item.productPic" mode="widthFix"></image>
					</view>
					<view class="goodsRight">
						<view class="goodsTitle">
							{{item.productName}}
							<!-- <text>¥{{item.productPrice}}</text> -->
						</view>
						<view class="goodsType">
							<view class="" v-for="(item,index) in JSON.parse(item.productAttr) ">
								{{item.key}}:{{item.value}}
							</view>

						</view>
						<view class="goodsTip">
							<view class="">
								{{item.promotionName}}
							</view>
						</view>
						<!-- 	<view class="sendOut">
							发货时间:付款后4天内发货
						</view> -->
					</view>
				</view>

				<view class="goodsList">
					<view class="">
						商品总价
					</view>
					<view class="">
						¥{{orderDetailData.totalAmount}}
					</view>

				</view>
				<view class="goodsList">
					<view class="">运费 </view>
					<view class=""> ¥0.00</view>
				</view>
				<view class="goodsList">
					<view class="">优惠 </view>
					<view class=""> ¥{{orderDetailData.promotionAmount|unitConverter}}</view>
				</view>

				<view class="goodsList">
					<view class="">收货信息</view>
					<view class="">
						{{orderDetailData.receiverProvince}}
						{{orderDetailData.receiverCity}}
						{{orderDetailData.receiverRegion}}
						{{orderDetailData.receiverDetailAddress}}
					</view>
				</view>
				<view class="goodsList">
					<view class="">下单时间</view>
					<view class=""> {{dayjs(orderDetailData.createTime).format('YYYY MM-DD hh:mm:ss')}}</text></view>
				</view>
				<view class="goodsList">
					<view class="">订单编号： </view>
					<view class="goodsCode">{{orderDetailData.orderSn}}<text
							@tap="goResult(orderDetailData.orderSn)">复制</text> </view>
				</view>
				<view class="goodsList">
					<view class="">备注： </view>
					<view class="">
						<text>
							{{orderDetailData.userNote}}
						</text>
					</view>
				</view>
				<view class="goodsList actualPayment">
					<view class="">实付款 </view>
					<view class="num">¥ {{orderDetailData.payAmount|unitConverter}}</view>
				</view>
			</view>
		</view>
		<view class="logistics">

		</view>
		<view class="logisticsFoot">
			<navigator class="item" :url="'/order/modifyAddress?orderId='+orderDetailData.id"
				v-if="orderDetailData.status==1">
				<view class="" v-if="orderDetailData.status==1||orderDetailData.status==0" @tap="footBtn('address')">
					修改地址
				</view>
			</navigator>
			<navigator :url="'/order/logistics?orderId='+orderDetailData.id">
				<view class="" v-if="orderDetailData.status==2" @tap="footBtn('logistics')">
					查看物流
				</view>
			</navigator>
			<!-- 	<navigator :url="'/pages/article/productDetails?CartIds='+ orderDetailData.status +'&urlType=goodsCart'">
				<view class="" v-if="orderDetailData.status==3||orderDetailData.status==4" @tap="footBtn('buyAgain')">
					再次购买
				</view>
			</navigator> -->
			<navigator class="item" :url="'/order/confirmOrder?order='+orderDetailData.id" v-if="orderDetailData.status==0">
				<view class="countdownBtn" v-if="orderDetailData.status==0" @tap="footBtn('payAmount')">
					付款￥{{orderDetailData.payAmount}}
				</view>
			</navigator>
		</view>
		<uni-popup class="logisticsPopup" :show="popupShow" @close="popupShow = false" ref="popup" type="bottom"
			borderRadius="10px 10px 0 0">
			<view class="popupTop">
				<view class="">
					详细信息
				</view>

				<view class="fastMail" v-if="expressData!=null">
					<image class="fastMailHead" src="" mode=""></image>
					<text> {{expressData.logisticsCompanyName}} </text>
					<text>{{expressData.mailNo}}</text>
					<image class="copy" src="/static/images/user/copy.png" mode=""></image>
				</view>
				<!-- 	<view class="fastMailText">
					{{expressData.theLastMessage}}
				</view> -->
			</view>

			<view class="logisticsview  popupView ">
				<view class="logisticsInfo popupInfo">
					<!-- 	<view class="logisticsList logisticsShow">
						<view class="tip tipShow">

						</view>
						<view class="tipText">已签收 08-10 10:43</view>
						<text class="">
							您已在深圳民治白石龙老村14栋店完成取件
						</text>
					</view> -->
					<view class="logisticsList" v-for="(item,index) in logisticsTraceDetailList" :key='index'>
						<view :class="index==0?'tip tipShow':'tip'"></view>
						<!-- 
						<view class="tipText" v-if="index==0">
							<view>
								已下单
							</view>
							<text>
								{{dayjs(item.time).format('MM-DD hh:mm:ss')}}</text>
						</view> -->
						<view class="tipText">
							<view>
								<view class="" v-if="item.logisticsStatus=='WAIT_ACCEPT'">已发货</view>
								<view class="" v-if="item.logisticsStatus=='ACCEPT'">已揽收</view>
								<view class="" v-if="item.logisticsStatus=='TRANSPORT'">运输中</view>
								<view class="" v-if="item.logisticsStatus=='DELIVERING'">派件中</view>
								<view class="" v-if="item.logisticsStatus=='FAILED'">
									包裹异常
									<text class="" v-if="item.subLogisticsStatus=='REFUSE SIGN'">
										（拒收）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='DELVER ABNORMAL'">
										（派件异常）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='RETENTION'">
										（滞留件）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='ISSUE'">
										（问题件）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='RETURN'">
										（退回件）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='DAMAGE'">
										（破损）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='CANCEL ORDER'">
										（揽件取消）
									</text>
								</view>
								<view class="" v-if="item.logisticsStatus=='SIGN'">已签收</view>
							</view>

							<text>{{dayjs(item.time).format('MM-DD hh:mm:ss')}}</text>
						</view>
						<text class="">
							{{item.desc}}
						</text>
						<!-- <view class="inDetail" @tap="popup()" v-if="index==0">详细信息></view> -->
					</view>


				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import API from '@/config/newApi.js'
	const util = require('@/common/util.js');
	export default {
		components: {
			uninavbar,
		},
		data() {
			return {
				popupShow: false,
				orderId: null,
				expressData: null,
				logisticsTraceDetailList: null,
				orderDetailData: null,
				orderItemList: [],
				normalOrderOvertime: 0,
				countdownShow: false,
				minute: 0,
				second: 0
			}
		},
		onShow() {
			this.expressInfo()
			this.orderDetail()
		},
		onLoad(options) {
			if (options.orderId) {
				this.orderId = options.orderId
				// this.expressInfo()
				// this.orderDetail()
			}
		},
		watch: {
			minute(e) {
				console.log(e)
				if (e == 0) {

					this.cancelOrder()
				}
			}
		},
		methods: {
			footBtn(urlType) {
				if (urlType == 'buyAgain') {

				}
			},
			goResult(data) {
				uni.setClipboardData({
					data: data, // 需要复制的内容
					success: () => {
						// 成功提示框显示 1 秒钟
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 1000
						});
					},
					fail: () => {
						// 失败提示框显示 1 秒钟
						uni.showToast({
							title: '复制失败，请重试',
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			timeup(e) {
				console.log('倒计时完毕？？？？？？？？？？？？？')
				this.countdownShow = false
				// this.expressInfo()
				// this.orderDetail()
			},
			getOrderSetting() {
				let data = {
					orderId: this.orderId
					// orderId: 89
				}
				let args = {
					ContentType: 'application/x-www-form-urlencoded;charset=UTF-8'
				}
				API.getOrderSetting(data, args).then(res => {
						if (res.code == 200) {
							this.normalOrderOvertime = res.data.normalOrderOvertime
							// this.orderDetailData.createTime
							let now = new Date(); // 设置时间为当前时间加上30分钟
							let expire = new Date(this.orderDetailData.createTime)
							expire.setMinutes(expire.getMinutes() + (this.normalOrderOvertime - 2));
							let time1 = this.dayjs(expire);
							let time2 = this.dayjs(now);
							console.log(expire)
							// 计算时间差并转换为其他单位
							let diffSeconds = time1.diff(time2, 'second'); // 秒
							let diffMinutes = time1.diff(time2, 'minute'); // 分钟
							let diffHours = time1.diff(time2, 'hour'); // 小时
							console.log('时间差（秒）:', diffSeconds);
							console.log('时间差（分钟）:', diffMinutes);
							console.log('时间差（小时）:', diffHours);
							if (diffMinutes > this.normalOrderOvertime) {
								console.log('超时订单')
							} else {
								this.minute = diffMinutes
								this.second = diffSeconds
								this.countdownShow = true
							}
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			cancelOrder() {
				let data = {
					orderId: this.orderId
					// orderId: 89
				}
				let args = {
					ContentType: 'application/x-www-form-urlencoded;charset=UTF-8'
				}
				API.cancelOrder(data, args).then(res => {
						if (res.code == 200) {

						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			orderDetail() {
				API.orderDetail(this.orderId).then(res => {
						if (res.code == 200) {
							this.orderDetailData = res.data
							this.orderItemList = res.data.orderItemList
							this.getOrderSetting()
						}
						console.log(this.expressData)
					})
					.catch(err => {
						console.log(err)
					})
			},
			expressInfo: function() {
				let data = {
					orderId: this.orderId
					// orderId: 89
				}
				let args = {
					ContentType: 'application/x-www-form-urlencoded;charset=UTF-8'
				}
				API.expressInfo(data, args).then(res => {
						if (res.code == 200&&res.data) {
							// this.expressData = JSON.parse(res.data)
							this.logisticsTraceDetailList = this.expressData.logisticsTraceDetailList
						}
						console.log(this.expressData)
					})
					.catch(err => {
						console.log(err)
					})
			},
			popup(type) {
				// this.popupType = type
				this.popupShow = !this.popupShow
			},
		},

	}
</script>

<style scoped lang="scss">
	.map {
		width: 100%;
		height: 500rpx;
		background-color: #f1f1f1;
	}

	.logistics {
		padding-top: 85rpx;
	}

	.countdown {
		text-align: center;
		color: #666;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		width: max-content;
		align-items: center;
		flex-direction: column;

		text {

			color: #999;
			margin: 0 5rpx;
			font-size: 22rpx;
		}
	}

	.orderInfo {
		display: flex;
		align-items: center;
		padding-bottom: 20rpx;
		position: relative;
		border-bottom: 2rpx solid #f1f1f1;
		margin-bottom: 30rpx;

		.orderInfoText {
			line-height: 36rpx;
			.orderPhone{
				margin-left: 10rpx;
			}
			text {
				color: #999;
				font-size: 22rpx;
			}
		}

		.orderAddressImg {
			width: 60rpx;
			height: 60rpx;
			margin-right: 10rpx;
		}

		.address {
			position: absolute;
			right: 0;
			top: 15rpx;
			width: 25rpx;
			height: 28rpx;
		}
	}

	.logisticsPopup {
		::v-deep .uni-popup__wrapper-box {
			max-height: 1400rpx !important;
			border-radius: 20rpx 20rpx 0;
		}
	}


	.logisticsview {
		padding: 40rpx;
		padding-bottom: 80rpx;
		height: calc(100vh - 350rpx);
		overflow: auto;

		.logisticsInfo,
		.logisticsGoods {
			padding: 40rpx;
			background-color: #fff;
			border-radius: 18rpx;
			padding-bottom: 0;

			.logisticsTitle {
				position: relative;
				top: -20rpx;
				color: #666666;
				font-size: 24rpx;
				border: none;
				padding: 0;

				.orderStatus {
					color: #6954D5;
					position: absolute;
					right: 0;
				}
			}

			.goodsInfo {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.goodsImg {
					background-color: #F3F2FC;
					border-radius: 18rpx;
					margin-right: 30rpx;
					display: flex;
					align-items: center;
					overflow: hidden;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.goodsRight {
					font-size: 24rpx;
				}
			}
		}

		.logisticsGoods {
			padding: 30rpx 30rpx;
			margin-top: 40rpx;
		}

		.logisticsInfo {

			.logisticsList {
				line-height: 36rpx;
				padding-left: 20rpx;
				position: relative;
				padding-bottom: 40rpx;
				font-size: 22rpx;
				vertical-align: top;
				border-left: 2rpx solid #6954D5;

				.logisticsAddress {
					line-height: 40rpx;
				}

				.tipText {
					position: relative;
					top: -8rpx;
					font-size: 28rpx;
					color: #333;
				}

				.tip {
					width: 15rpx;
					height: 15rpx;

					border: 2rpx solid #6954D5;
					position: absolute;
					left: -10rpx;
					top: 0rpx;
					border-radius: 50%;
					background-color: #fff;
				}

				.tipShow {
					background-color: #6954D5;

				}

				.tipBtn {
					border: 2rpx solid #6954D5;
					margin-left: 20rpx;
					color: #6954D5;
					border-radius: 10rpx;
					padding: 0 10rpx;
				}

				.inDetail {
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					color: #6954D5;
					font-size: 20rpx;
				}

				text {
					color: #999;
					font-size: 20rpx;
				}
			}

			.logisticsList:last-child {
				border-left: 2rpx solid #fff;
			}

			.logisticsShow {
				border-left: 2rpx solid #6954D5;

				.tipText {
					color: #6954D5;
				}
			}

		}

		.goodsRight {
			flex: 1;

			.goodsTitle {
				font-size: 26rpx;
				position: relative;
				display: -webkit-box;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				height: 40rpx;
				margin-bottom: 20rpx;

				text {
					margin-left: 20rpx;
					position: absolute;
					right: 0;
				}
			}

			.goodsType {
				width: 360rpx;
				color: #666;
				background: rgba(153, 153, 153, 0.1);
				border-radius: 4px;
				padding: 10rpx;
				font-size: 20rpx;
				margin: 5rpx 0;
			}
		}

		.goodsTip {
			display: flex;

			view {
				border-radius: 15rpx;
				border: #6954D5 2rpx solid;
				color: #6954D5;
				font-size: 20rpx;
				padding: 0 15rpx;
				margin-right: 10rpx;
				margin-top: 10rpx;
			}
		}

		.sendOut {
			color: #999;
			font-size: 20rpx;
			margin-top: 10rpx;
		}

		.goodsList {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #666;

			.goodsCode {
				font-size: 26rpx;

				text {
					border-left: 2rpx solid #666;
					padding-left: 10rpx;
					margin-left: 10rpx;
				}
			}
		}

		.actualPayment {
			border-top: 1px solid rgba(221, 221, 221, 0.87);

			.num {
				color: #FF584B;
			}
		}

	}

	.popupTop {
		width: 100%;
		padding-bottom: 0rpx;
		text-align: center;

		.fastMail {
			text {
				margin: 0;
			}

		}
	}

	.popupView {

		.popupInfo {
			padding: 40rpx 0;

			.logisticsList {
				border-left: 2rpx solid #6954D5;
			}

			.logisticsList:last-child {
				border: none;
				color: #6954D5;
			}

			.logisticsShow {
				border-left: 1px solid #6954D5;
			}
		}

	}

	.fastMail {
		display: flex;
		border-bottom: 2rpx solid #f1f1f1;
		padding: 20rpx 20rpx;
		align-items: center;
		position: relative;

		text {
			margin-right: 20rpx;
		}

		.fastMailHead {
			width: 50rpx;
			height: 50rpx;
			background-color: #999;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.copy {
			width: 25rpx;
			height: 25rpx;
			margin-left: 20rpx;
		}
	}

	.fastMailText {
		text-align: left;
		color: #999;
		font-size: 24rpx;
		padding: 20rpx 0;
	}

	.logisticsFoot {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		text-align: right;
		align-items: center;
		justify-content: flex-end;
		padding: 0 30rpx;
		box-sizing: border-box;

		view {
			width: 170rpx;
			height: 60rpx;
			border-radius: 40rpx;
			border: 2rpx solid #5E4AF9;
			color: #6954D5;
			text-align: center;
			line-height: 60rpx;
			font-size: 22rpx;
			margin-left: 20rpx;
		}

		.countdownBtn {
			background-color: #5E4AF9;
			color: #fff;
		}
	}
</style>